<template>
  <div>
    <el-row>
      <el-col v-for="(item,index) in detailsList" :key="index" :span="24" :offset="index%3===0?0:''">
        <el-card style="width: 90%;margin-left: 5%;margin-top: 35px; border-radius: 20px;" shadow="always">
          <!--            :class="cardClass(item.projectCategory)"     -->
          <div style="display: flex; flex-direction: column;">
            <div style="display: flex;font-size: 40px">
              <el-row style="width: 100%">
                <el-col :span="3">
                  <div style="display: flex;  flex-direction: row; padding-right: 20px;">
                    <el-image :src="cardClass(item.projectCategory)" style="height: 80%;width:80%"></el-image>
                  </div>
                </el-col>
                <el-col :span="21">
                  <div style="display: flex; justify-content: space-between; align-items: center;">
                    <!-- 将手牌号、位置和录单员工放在同一行 -->
                    <div style="margin-top: 20px;">手牌号:{{ item.handBrand }}</div>
                    <div style="margin-top: 20px;">位置:{{ item.seat }}</div>
                    <div style="margin-top: 20px;">录单员工:{{ item.recordEmployeeNumber }}</div>
                  </div>
                  <div style="display: flex; justify-content: space-between; align-items: center;"> <!-- 剩余两个项目，并列显示 -->
                    <div style="display: flex; justify-content: flex-start; align-items: center;"> <!-- 录单员工居右 -->
                      <div>项目名称:{{ item.entryName }}</div>
                    </div>
                    <div style="display: flex; justify-content: flex-end; align-items: center;"> <!-- 录单员工居右 -->
                      <div>单价:{{ item.unitPrice }}</div>
                    </div>
                  </div>
                  <div style="display: flex; justify-content: space-between; align-items: center;"> <!-- 上下钟时间，并列显示 -->

                    <div style="display: flex; justify-content: flex-start; align-items: center;"> <!-- 录单员工居右 -->
                      <div>上钟时间:{{ item.note2 }}</div>
                    </div>
                    <div style="display: flex; justify-content: flex-end; align-items: center;"> <!-- 录单员工居右 -->
                      <div>下钟时间:{{ item.note3 }}</div>
                    </div>
                  </div>
                  <div style="display: flex; justify-content: left; align-items: center;"> <!-- 上下钟时间，并列显示 -->
                    <div>评价:</div>
                    <template v-if="!item.technicianEvaluation">
                      <el-button style="margin-left: 5px;margin-top: 12px;" :type="buttonStyle1(0,item.id)" icon="el-icon-star-off" @click="A(item.id)"></el-button>
                      <el-button style="margin-left: 5px;margin-top: 12px;" :type="buttonStyle2(1,item.id)" icon="el-icon-star-off" @click="B(item.id)"></el-button>
                      <el-button style="margin-left: 5px;margin-top: 12px;" :type="buttonStyle3(2,item.id)" icon="el-icon-star-off" @click="C(item.id)"></el-button>
                      <el-button style="margin-left: 5px;margin-top: 12px;" :type="buttonStyle4(3,item.id)" icon="el-icon-star-off" @click="D(item.id)"></el-button>
                      <el-button style="margin-left: 5px;margin-top: 12px;" :type="buttonStyle5(4,item.id)" icon="el-icon-star-off" @click="E(item.id)"></el-button>
                    </template>

                    <template v-if="item.technicianEvaluation">
                      <div>{{ item.technicianEvaluation }}</div>
                    </template>
                  </div>
                </el-col>

              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="paint" style="margin-top: 35px;text-align: center">
      <el-button plain type="primary" round
                 style="margin-bottom: 35px;font-size: 20px;width: 150px;height: 60px;margin-right: 5%; float:right"
                 @click="back()">返回
      </el-button>
    </div>
  </div>
</template>
<script>
import {listDetails1, updateDetails, pingjiaA, pingjiaB, pingjiaC, pingjiaD, pingjiaE,} from "@/api/module/yzx/details";

export default {
  name: "feiyongcx",
  data() {
    return {
      currentClickedRowId: null,
      activeIndex: -1,
      // 总条数
      zt: 0,
      total: 0,
      // 消费详细表格数据
      detailsList: [],
      detailsList1: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      queryParams1: {
        entryName: null,
      },
      // 表单参数
      form: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    buttonStyle1(index, id) {
      if (this.currentClickedRowId === id) {
        return index <= this.activeIndex ? 'warning' : 'info';
      }else
      {
        return  'info';
      }
  },
  buttonStyle2(index, id) {
    if (this.currentClickedRowId === id) {
      return index <= this.activeIndex ? 'warning' : 'info';
    }else
    {
      return  'info';
    }
  },
  buttonStyle3(index, id) {
    if (this.currentClickedRowId === id) {
      return index <= this.activeIndex ? 'warning' : 'info';
    }else
    {
      return  'info';
    }
  },
  buttonStyle4(index, id) {
    if (this.currentClickedRowId === id) {
      return index <= this.activeIndex ? 'warning' : 'info';
    }else
    {
      return  'info';
    }
  },
  buttonStyle5(index, id) {
    if (this.currentClickedRowId === id) {
      return index <= this.activeIndex ? 'warning' : 'info';
    }else
    {
      return  'info';
    }// 第五个按钮默认样式为default
  },
  cardClass(status) {
    return require(`../../../assets/icons/imageicon/34.png`);

    /* if (status === '04') {
       return  require(`../../../assets/icons/imageicon/30.png`); // 成功状态的颜色类名
     } else if (status === '05') {
       return  require(`../../../assets/icons/imageicon/32.png`); // 警告状态的颜色类名
     } else if (status === '07') {
       return  require(`../../../assets/icons/imageicon/33.png`); // 错误状态的颜色类名
     }*/
  },
  back() {
    this.$router.push({path: "/jishi/index"});
  },
  A(id) {
    if (id === this.currentClickedRowId) {
      // 如果点击的是当前已经点击的行，则取消点击状态
      this.currentClickedRowId = id;
    } else {
      // 如果点击的是新行，则更新点击行，并清除之前点击行的状态
      this.currentClickedRowId = id;
    }
    this.queryParams.id = id;
    pingjiaA(this.queryParams).then(response => {
      this.getList();
    });
    this.activeIndex = 0;

  },
  B(id) {
    if (id === this.currentClickedRowId) {
      // 如果点击的是当前已经点击的行，则取消点击状态
      this.currentClickedRowId = id;
    } else {
      // 如果点击的是新行，则更新点击行，并清除之前点击行的状态
      this.currentClickedRowId = id;
    }
    this.queryParams.id = id;
    pingjiaB(this.queryParams).then(response => {
      this.getList();
    });
    this.activeIndex = 1;
  },
  C(id) {
    if (id === this.currentClickedRowId) {
      // 如果点击的是当前已经点击的行，则取消点击状态
      this.currentClickedRowId = id;
    } else {
      // 如果点击的是新行，则更新点击行，并清除之前点击行的状态
      this.currentClickedRowId = id;
    }
    this.queryParams.id = id;
    pingjiaC(this.queryParams).then(response => {
      this.getList();
    });
    this.activeIndex = 2;
  },
  D(id) {
    if (id === this.currentClickedRowId) {
      // 如果点击的是当前已经点击的行，则取消点击状态
      this.currentClickedRowId = id;
    } else {
      // 如果点击的是新行，则更新点击行，并清除之前点击行的状态
      this.currentClickedRowId = id;
    }
    this.queryParams.id = id;
    pingjiaD(this.queryParams).then(response => {
      this.getList();
    });

    this.activeIndex = 3;
  },
  E(id) {
    if (id === this.currentClickedRowId) {
      // 如果点击的是当前已经点击的行，则取消点击状态
      this.currentClickedRowId = id;
    } else {
      // 如果点击的是新行，则更新点击行，并清除之前点击行的状态
      this.currentClickedRowId = id;
    }
    this.queryParams.id = id;
    pingjiaE(this.queryParams).then(response => {
      this.getList();
    });
    this.activeIndex = 4;
  },

  /** 查询消费详细列表 */


  getList() {
    this.queryParams.nextClockStatus = "0";
    listDetails1(this.queryParams).then(response => {
      this.detailsList = response.rows;
      if (this.detailsList != null) {

        this.detailsList.forEach(item => {
          this.zt = item.id;
        })
        if (this.zt == 0) {
          this.$message({
            type: 'error',
            message: '暂无上钟记录!'
          });
          this.$router.push({path: "/jishi/index"});
        }
        ;
      }
      /*console.log("111111111111111112q"+this.detailsList+"q33333333333");
      if (this.detailsList == null) {
        console.log("211111111111111112q"+this.detailsList+"q33333333333");
        this.$message({

          type: 'error',
          message: '暂无上钟记录!'
        });
        this.$router.push({path: "/jishi/index"});
      };*/
    });
  },
}
}
;
</script>
<style>
.star-button {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background-color: #f8c526;
  color: #fff;
}

.star-button:before,
.star-button:after {
  content: '';
  position: absolute;
  width: 50%;
  height: 2px;
  background-color: #fff;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
}

.star-button:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.star-button:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
</style>
